<script>
export default {
    data() {
        return {
            newTodo: '',
            list: [
                { id: 1, name: '设计产品原型', completed: true, canEdit: false },
                { id: 2, name: 'UI设计', completed: true, canEdit: false },
                { id: 3, name: '编写页面代码', completed: true, canEdit: false },
                { id: 4, name: '测试js功能', completed: true, canEdit: false },
            ]
        }
    },
    computed: {
        remainingCount() {
            return this.list.filter(item => !item.completed).length; // 计算未完成的任务数量
        }
    },
    methods: {

        add() {
            if (this.newTodo.trim() === '') {
                alert('请输入任务名称');
                return;
            }
            this.list.unshift({
                id: +new Date(),
                name: this.newTodo,
                completed: false,
                canEdit: false
            });
            this.newTodo = '';
        },

        toggleComplete(item) {
            item.completed = !item.completed; // 切换任务的完成状态
        },

        clearCompleted() {
            // 删除所有已完成的任务
            this.list = this.list.filter(item => !item.completed);
        }
        , editDone(item) {
            item.canEdit = false;
        }
        , toInput(item) {
            if (item.completed) {
                alert('已完成的事项不能编辑');
                return;
            }
            item.canEdit = true;
        }
    }
}
</script>

<template>
    <div id="app">

        <h1>任务列表</h1>
        <footer class="footer" v-show="list.length > 0">
            <span class="todo-count">任务总数：<strong>{{ list.length }}：</strong></span>
            <span class="todo-clear">还有：<strong>{{ remainingCount }}</strong>个未完成:
                【<span @click="clearCompleted" :class="{ 'actives': true }">完成</span>】
                <!-- 点击此按钮可以删除已完成的任务 -->
            </span>
        </footer>

        <ul class="todo-list">
            <li class="todo" v-for="(item, index) in list" :key="item.id">
                <div class="view">
                    <input class="toggle" type="checkbox" :checked="item.completed" @change="toggleComplete(item)">
                    <span v-if="item.canEdit">
                        <input type="text" v-model="item.name" @blur="editDone(item)">
                    </span>
                    <span v-else @click="toInput(item)" :class="{ 'completed': item.completed }">
                        {{ item.name }}
                    </span>
                </div>
            </li>
        </ul>
        

        <input @keyup.enter="add" placeholder="请输入任务" class="new-todo" v-model="newTodo">
        <button @click="add" class="add">添加</button>

    </div>
</template>

<style>
ul {
    list-style: none;
}

.actives {
    color: #70d3c4;
    cursor: pointer;
}

.completed {
    color: #ccc;
    text-decoration: line-through;
    /* 添加删除线 */
}
</style>